<template>
	<view class="receipt-page">
		<view class="top-navbar">
			<view class="u-flex-1"><u-tabs-swiper ref="tabs" :list="tabList" bar-height="0" :is-scroll="true"
					active-color="#333333" inactive-color="#666666" font-size="32" :current="current"
					@change="tabsChange"></u-tabs-swiper></view>
			<view class="u-type-primary" @click="$u.route('/pages/subpage/wallet/headsUp')">抬头管理</view>
		</view>

		<swiper class="u-flex-1" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
			<swiper-item class="swiper-item" v-for="(tab,idx) in tabList" :key="idx">
				<receiptScrollItem ref="mescrollItem" :i="idx" :index="current" :tabs="tabList" height="100%"
					@selectChange="selectChange">
				</receiptScrollItem>
			</swiper-item>
		</swiper>

		<view class="action-btn" v-show="current==0">
			<u-button type="primary" hover-class="none" shape="circle" @click="submitHandle">立即开票</u-button>
		</view>

		<u-modal v-model="showmodel" :show-title="false" confirm-text="知道了" :confirm-color="$appConfig.mainColor">
			<view class="slot-content">
				<image src="/static/kp_suc.png" mode="widthFix" style="width: 100%;"></image>
				<view class="model-content">
					<view class="u-m-b-30 u-font-36">开票申请提交成功</view>
					<view class="u-font-28 u-tips-color">发票提交申请资料后在10个工作日内开具</view>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import receiptScrollItem from './components/receipt-scroll-item.vue'
	export default {
		components: {
			receiptScrollItem
		},
		data() {
			return {
				tabList: [{
						name: '未开票'
					},
					{
						name: '开票中'
					},
					{
						name: '已开票'
					}
				],
				current: 0,
				swiperCurrent: 0,
				checked: true,
				hasheads: null,
				showmodel: false,
				select: []
			}
		},
		onShow() {
			this.queryDetail()
		},
		methods: {
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.tabs.setDx(dx);
			},
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
				this.resetData()
			},
			selectChange(ids) {
				this.select = ids
			},
			resetData() {
				let mescrollItems = this.$refs.mescrollItem;
				console.log(mescrollItems);
				if (mescrollItems) {
					let item = mescrollItems[this.current]
					if (item) {
						item.mescroll.resetUpScroll()
					}
				}
			},
			// 开票
			submitHandle() {
				if (!this.hasheads.id) {
					uni.showModal({
						content: '当前没有默认发票抬头',
						confirmText: '去添加',
						confirmColor: this.$appConfig.mainColor,
						success: (res) => {
							if (res.confirm) {
								this.$u.route('/pages/subpage/wallet/headsUp')
							}
						}
					})
				} else {
					uni.showModal({
						title: '当前默认发票抬头',
						content: this.hasheads.name,
						confirmColor: this.$appConfig.mainColor,
						success: (res) => {
							if (res.confirm) {
								this.queryMakeReceipt()
							}
						}
					})
				}
			},
			queryDetail() {
				this.$u.api.invoiceDefault().then(res => {
					this.hasheads = res
				})
			},
			queryMakeReceipt() {
				if (this.select.length > 0) {
					this.$u.api.invoiceMake({
						invoice_id: this.hasheads.id,
						ids: this.select.toString()
					}).then(res => {
						this.showmodel = true
					})
				} else {
					this.$u.toast('当前没有可开票数据')
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.receipt-page {
		display: flex;
		flex-direction: column;
		height: 100vh;
	}

	.top-navbar {
		display: flex;
		align-items: center;
		padding-right: 30rpx;
		background-color: #fff;
	}

	.swiper-item {
		height: 100%;
	}

	.page-box {
		padding: 30rpx 30rpx 160rpx;
	}

	.action-btn {
		position: fixed;
		width: 100%;
		bottom: 70rpx;
		padding: 0 30rpx;
	}

	.cpt-title {
		padding: 0 30rpx;
		height: 70rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.model-content {
		padding: 30rpx 30rpx 35rpx 40rpx;
	}
</style>